<template>
    <div id="photo-view">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :fullscreen="true"
            :close-on-click-modal="false" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <div class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
                <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box;">
                    <div style="box-sizing: border-box;" class="flex-1 pos-r">
                        <div class="pos-a w-h-100" style="box-sizing: border-box;">
                            <el-card class="box-card w-h-100" shadow="never">
                                <div style="" class="w-h-100 ver-flex">
                                    <div class="flex-1 pos-r">
                                        <div class="pos-a w-h-100">
                                            <el-table 
                                                :data="list" 
                                                class="w-h-100" 
                                                style="width: 100%" 
                                                border 
                                                v-loading="loading" 
                                                element-loading-background="rgba(0, 0, 0, 0.5)"
                                            >

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_TypeName" label="风险分析单元分类"  align="center" />

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_RiskPartitionName" label="风险分区名称"  align="center" />

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_Name" label="风险分析单元"  align="center" />

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_ResponsibleDepName" label="责任部门"  align="center" />

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="责任人"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_ResponsibleMan">{{ scope.row.v_ResponsibleMan }}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="是否启用"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.isUse" style="color: #67C23A;">是</span>
                                                        <span v-else style="color: #E6A23C;">否</span>
                                                    </template>
                                                </el-table-column>

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_EvaluationMethod" label="风险评价方法"  align="center" />

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_RiskLevelName" label="风险等级"  align="center" />

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="n_EventCount" label="风险事件数量(个)"  align="center" />

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="n_DCListCount" label="危害因数数量(个)"  align="center" fixed="right" />

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="l_ApplyEmpName" label="申请人员"  align="center" fixed="right" />

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="申请时间"  align="center" fixed="right">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.d_ApplyTime">{{ scope.row.d_ApplyTime }}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>

                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="当前流程状态"  align="center" fixed="right">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.n_FlowinstanceState === 0" style="color: #909399;">{{ scope.row.v_FlowinstanceStateName }}</span>
                                                        <span v-if="scope.row.n_FlowinstanceState === 1" style="color: #E6A23C;">{{ scope.row.v_FlowinstanceStateName }}</span>
                                                        <span v-if="scope.row.n_FlowinstanceState === 2" style="color: #67C23A;">{{ scope.row.v_FlowinstanceStateName }}</span>
                                                        <span v-if="scope.row.n_FlowinstanceState === 3" style="color: #409EFF;">{{ scope.row.v_FlowinstanceStateName }}</span>
                                                        <span v-if="scope.row.n_FlowinstanceState === 4" style="color: #F56C6C;">{{ scope.row.v_FlowinstanceStateName }}</span>
                                                        <span v-if="scope.row.n_FlowinstanceState === 5" style="color: #865205;">{{ scope.row.v_FlowinstanceStateName }}</span>
                                                    </template>
                                                </el-table-column>

                                                <el-table-column width="300" label="操作" align="center" fixed="right">
                                                    <template #default="scope">
                                                        <el-button @click="detailClick(scope.row)" class="icon-e" icon="ele-View" size="small" text type="primary">详情</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                    <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
                                        <el-pagination
                                            v-model:currentPage="pageNo"
                                            v-model:page-size="pageSize"
                                            :total="totalRows"
                                            :page-sizes="[10, 20, 50, 100]"
                                            small
                                            background
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            class="w-h-100"
                                        />
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <el-button @click="cancelUseClick">关 闭</el-button>
            </template>
        </el-dialog>
        <EditRiskControl
            :isView="false"
            :needUrl="needUrl"
            :repairInfo="editInfo"
            :isUseDialog="editDialog"
            @cancelEditClick="cancelEditClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue';
import { ElButton, ElDialog } from 'element-plus';
import getTableData from '/@/utils/getTableData';
import { SMSDCAnalysisUnitSnapshotPage , SMSDCAnalysisUnitSnapshotDCListSnapshotList } from '/@/api/centerControl/sms';
import EditRiskControl from './edit-RiskControl.vue';
export default defineComponent( {
    name: 'photo-view',
    components: {EditRiskControl},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        let searchObj:any = reactive({
            l_SourceId: 0,
        });
        const editInfo = ref();
        const editDialog = ref(false);

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }
        
        /*** 查看快照详情 */
        const detailClick = (val: any) => {
            editDialog.value = true;
            editInfo.value = JSON.stringify(val);
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelPhotoClick')
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                titleCon.value = '历史变更快照';
                searchObj.l_SourceId = JSON.parse(props.repairInfo).id;
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        /*** 详情关闭按钮 */
        const cancelEditClick = () => {
            editDialog.value = false;
        }

        return {
            ...getTableData(SMSDCAnalysisUnitSnapshotPage,{},searchObj),
            handleClose,
            cancelUseClick,
            titleCon,
            isUseDialog,
            detailClick,
            editInfo,
            editDialog,
            cancelEditClick,
            needUrl: SMSDCAnalysisUnitSnapshotDCListSnapshotList,
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-dialog__body){
    height: calc(100vh - 110px);
    max-height: none!important;
    overflow-y: hidden;
}
</style>